<template>
	<view style="background-color: #000;padding: 0 15px; height: 100%;">
		<view class="shang">
			<view class="shzuo">倒计时：</view>
			<view class="shyou">
				<view class="progress">
					<view class="pro"></view>
				</view>
			</view>
		</view>
		<view class="xia">
			<view class="xialeft">
				<view class="xl1">
					<image class="bed" src="../../static/ihgPic/bed.png" mode=""></image>
				</view>
				<view class="xl1 xl2">
					<image class="jiang" src="../../static/ihgPic/jiang.png" mode=""></image>
				</view>
				<view class="xl1">
					<image class="xizao" src="../../static/ihgPic/xizao.png" mode=""></image>
				</view>
				<view class="xl1 xl3">
					<image class="loudou" src="../../static/ihgPic/loudou.png" mode=""></image>
				</view>
				<view class="xl1 xl2">
					<image class="qian" src="../../static/ihgPic/qian.png" mode=""></image>
				</view>
			</view>
			<view class="xiamid">
				<view class="xlm">
					<view class="next">
						NEXT
					</view>
					<view class="happy">
						生日惊喜
					</view>
				</view>
				<view class="xl1 xlm2">
					酣畅淋漓
				</view>
			</view>
			<view class="xiaright">
				<view class="xl1 xl4">
					<image class="train" src="../../static/ihgPic/train.png" mode=""></image>
				</view>
				<view class="xl1 xl5">
					<image class="dayi" src="../../static/ihgPic/dayi.png" mode=""></image>
				</view>
				<view class="xl1 xl6">
					<image class="gift" src="../../static/ihgPic/gift.png" mode=""></image>
				</view>
				<view class="xl1 xl4">
					<image class="chonglang" src="../../static/ihgPic/chonglang.png" mode=""></image>
				</view>
				<view class="xl1 xl7">
					<image class="hehu" src="../../static/ihgPic/hehu.png" mode=""></image>
				</view>
			</view>
		</view>
		<button @click="goToCaidan">彩蛋</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goToCaidan(){
				uni.navigateTo({
					url:'/pages/caidan/caidan'
				})
			}
		}
	}
</script>

<style>
	uni-page-body {
		display: block;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
	}
	.shang{
		height: 77px;
		line-height: 77px;
		display: flex;
		align-items: center;
	}
	.shzuo{
		color: #fff;
		font-size: 18px;
	}
	.shyou{
		flex-grow: 1;
	}
	.progress{
		flex-grow: 1;
		border: 3px solid #fff;
		height: 9px;
		padding: 1px;
		border-radius: 10px;
	}
	.pro{
		height: 9px;
		width: 50%;
		background-color: #fff;
		border-radius: 10px;
	}
	.xialeft view{
		width: 170rpx;
		height: 142rpx;
	}
	.xia{
		display: flex;
		justify-content: space-between;
	}
	.xl1{
		width: 170rpx;
		height: 142rpx;
		background-color: #f2a21c;
		margin-bottom: 34rpx;
		position: relative;
	}
	.xl2{
		background-color: #d8288f;
	}
	.xl3{
		background-color: #7c3676;
	}
	.xl4{
		background-color: #d30e81;
	}
	.xl5{
		background-color: #f09600;
	}
	.xl6{
		background-color: #6c1d65;
	}
	.xl7{
		background-color: #6f2f72;
	}
	.xlm{
		width: 174rpx;
		height: 146rpx;
		border: 3rpx solid #fff;
		margin-bottom: 205rpx;
		color: #fff;
		font-size: 36rpx;
		text-align: center;
		padding-top: 20rpx;
		box-sizing: border-box;
	}
	.xlm2{
		background-color: #fff;
		font-size: 36rpx;
		color: #333333;
		line-height: 142rpx;
		text-align: center;
	}
	.next{
		color: #f09600;
	}
	.bed{
		width: 138rpx;
		height: 80rpx;
		position: absolute;
		top: 30rpx;
		left: 20rpx;
	}
	.jiang{
		width: 84rpx;
		height: 82rpx;
		position: absolute;
		top: 1rem;
		left: 1.3rem;
	}
	.xizao{
		width: 103rpx;
		height: 83rpx;
		position: absolute;
		top: 0.9rem;
		left: 1.2rem;
	}
	.loudou{
		width: 128rpx;
		height: 80rpx;
		position: absolute;
		top: 24rpx;
		left: 24rpx;
	}
	.qian{
		width: 93rpx;
		height: 87rpx;
		position: absolute;
		top: 0.9rem;
		left: 1.2rem;
	}
	.train{
		width: 88rpx;
		height: 87rpx;
		position: absolute;
		top: 0.9rem;
		left: 1.4rem;
	}
	.dayi{
		width: 99rpx;
		height: 87rpx;
		position: absolute;
		top:28rpx;
		left:36rpx;
	}
	.gift{
		width: 111rpx;
		height: 77rpx;
		position: absolute;
		top:28rpx;
		left:36rpx;
	}
	.chonglang{
		width: 91rpx;
		height: 80rpx;
		position: absolute;
		top:28rpx;
		left:42rpx;
	}
	.hehu{
		width: 99rpx;
		height: 82rpx;
		position: absolute;
		top:28rpx;
		left:42rpx;
	}
</style>
